<template>
  <div class="store-picker-sc">
    <div class="storepicker-cell-out">
      <a class="needsclick" @click="show(true)">
        <cell :is-link="true">
          <div
            slot="title"
            :class="['cell-title',resultItem.value?'cell-title-active':'']"
          >{{showTxt}}</div>
        </cell>
      </a>
    </div>
    <div v-transfer-dom>
      <div id="popup_out_sc" class="popup-out-sc">
        <popup v-model="popShow" @on-show="handlePopShow" @on-hide="handlePopHide">
          <div class="storepicker-header flex-and-center flex-between">
            <span class="tt">{{selectTitle}}</span>
            <img class="close-img" src="../images/storepicker_close.png" @click="show(false)">
          </div>
          <div class="storepicker-list">
            <div
              v-for="(item,index) in list"
              :key="index"
              class="item flex-and-top"
              @click="selectClick(item)"
            >
              <div
                :class="['select',item.value===resultItem.value?'select-active':'','flex-and-center']"
              >
                <div class="active"></div>
              </div>
              <div class="store-content-sc">
                <div class="store-name">{{item.name}}</div>
                <div class="store-address">{{item.address}}</div>
              </div>
            </div>
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>

<script>
import { Cell, Group, Alert, PopupPicker, Popup } from "vux";
// import PopupCustom from 'vux/src/components/popup-custom'
export default {
  props: {
    holder: {
      type: String,
      default: "标题"
    },
    selectTitle: {
      type: String,
      default: "选择标题"
    },
    list: {
      type: Array
    }
  },
  data() {
    return {
      active: false,
      popShow: false,
      resultItem: {
        value: "",
        name: this.holder
      }
    };
  },
  watch: {
    list: {
      handler: function(newValue, oldValue) {
        if (newValue.length <= 0) this.active = false;
        else this.active = true;
        this.resultItem.value = "";
        this.resultItem.name = this.holder;
      },
      deep: true
    },
    popShow(newVal, oldVal) {
      if (newVal) {
        ModalHelper.afterOpen();
        this.scrollThroughHandle();
      } else {
        ModalHelper.beforeClose();
        this.scrollThroughHandleOut();
      }
    }
  },
  computed: {
    showTxt() {
      return this.resultItem.name;
    }
  },
  components: {
    Cell,
    Group,
    PopupPicker,
    Alert,
    Popup
  },
  methods: {
    selectClick(item) {
      this.resultItem.value = item.value;
      this.resultItem.name = item.name;
      this.$emit("result", [item.value]);
      this.show(false);
    },
    show(val) {
      if (val) {
        if (!this.active) {
          alert("请先选择城市");
          return;
        }
        this.popShow = true;
      } else {
        this.popShow = false;
      }
    },
    handlePopShow() {
      this.$emit("on-show");
    },
    handlePopHide() {
      this.$emit("on-hide");
    },
    appScrollControl(val) {
      if (val)
        document.getElementById("app").style.setProperty("overflow-y", "auto");
      else
        document
          .getElementById("app")
          .style.setProperty("overflow-y", "hidden");
    },
    scrollThroughHandle() {
      document.getElementById("app").setAttribute("style", "overflow-y:hidden");
      document
        .querySelector(".storepicker-header")
        .addEventListener("touchmove", e => {
          e.preventDefault();
        });
      let pickerList = document.querySelector(".storepicker-list");
      new ScrollFix(pickerList);
    },
    scrollThroughHandleOut() {
      document.getElementById("app").setAttribute("style", "overflow-y:auto");
    }
  }
};
</script>

<style lang="less">
.store-picker-sc {
  // .vux-popup-mask {
  //   display: none;
  // }
  // .vux-popup-show {
  //   display: block;
  // }
  .show.vux-cell-box {
    height: 42px;
    border-color: #000;

    .weui-cell {
      height: 24px;
    }
  }

  .vux-tap-active {
    &:active {
      background-color: transparent;
    }
  }

  .storepicker-cell-out {
    width: 100%;
    height: 44px;
    border: 1px solid #d6d6d6;
    display: inline-block;
    box-sizing: border-box;
    > a {
      display: block;
      width: 100%;
    }
    .cell-title {
      font-size: 14px;
      color: #919191;
    }

    .cell-title-active {
      color: #000;
    }
  }

  .weui-dialog__btn {
    color: #000;
    font-size: 14px;
  }

  .popup-out-sc {
    line-height: 1 !important;
  }
  .weui-cell {
    height: 24px;
    padding: 10px 14px 10px 12px;
  }

  .weui-cells {
    font-size: 14px;

    &:after {
      border-bottom: 0;
    }

    &:before {
      border-top: 0;
    }
  }

  .vux-cell-value {
    color: #000000;
    font-size: 14px;
  }

  .vux-no-group-title {
    margin-top: 0;
  }
  .vux-tap-active {
    .weui-cell__ft {
      padding-right: 13px;
      position: relative;
      &:after {
        content: "";
        display: inline-block;
        background: url("../images/triangle.png") no-repeat;
        background-size: 100% 100%;
        width: 10px;
        height: 6px;
        border: 0;
        transform: none;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        right: 0;
      }
    }
  }

  .weui-cell_access {
    .weui-cell__ft {
      &:after {
        background: url("../images/triangle.png") no-repeat;
        background-size: 100% 100%;
        width: 10px;
        height: 6px;
        border: 0;
        transform: none;
      }
    }
  }
}
</style>
